<template>
  <div class="news-detail">
    <div class="news-detail-header">
      {{decodedItem.title}}
    </div>
    <div class="time">{{decodedItem.wdate}}</div>
    <div class="line"></div>
    <div class="news-detail-content" v-html="newsDetailContent"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { newslistbyid } from '@/api/user'
const route = useRoute();
const newsDetailContent = ref('');
const decodedItem = ref(<any>{})
const { t } = useI18n()
  // 定义API响应类型接口
interface ApiResponse {
  msg: string;
  code: number;
  data: any;
}
onMounted(async () => {
  // 获取URL中的item参数
  const id = route.query.id as string;
  if (id) {
    try {

      const res = await newslistbyid({id: id});
    if (res.code === 200) {
      newsDetailContent.value = res.data.reply;
      decodedItem.value = res.data
    } else {
      showToast(res.msg || t("user-coupon_noData"));
    }
    
    } catch (error) {
      console.error(error);
    }
  }
});
</script>

<style scoped>
.news-detail {
  min-height: 100vh;
  overflow: hidden;
  padding: 34px;
  color: #f6eade;
  background: url("../../assets/images/login/topBg.png") no-repeat top;
  background-size: 100% auto;
}
.news-detail-header {
  font-size: 17px;
  font-weight: 700;
}
.news-detail-content {
}
.time {
  padding-top: 17px;
  padding-bottom: 17px;
  font-size: 13px;
  color: hsla(0, 0%, 100%, 0.65);
  font-weight: 700;
}
.line {
  height: 1px;
  transform: scaleY(0.5);
  background: rgba(246, 232, 222, 0.4);
}
:deep(a) {
  padding: 1.5px 0 1.5px 0;
  color: #366092;
  word-break: break-all;
}
:deep(img) {
  max-width: 100%;
}
:deep(ul) {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}
</style>
